<template>
  <div class="message-panel">
    <div class="panel-title">
      <i class="title-icon">📢</i>
      实时消息
      <div class="title-decoration"></div>
    </div>
    <div class="message-list" ref="messageListRef">
      <div 
        v-for="message in messages.slice(0, 2)" 
        :key="message.id"
        class="message-item"
        :class="[message.type, { 'message-new': isNewMessage(message) }]"
        @click="handleMessageClick(message)"
      >
        <div class="message-header">
          <div class="message-time">{{ message.time }}</div>
          <div class="message-type-badge" :class="message.type">
            {{ getTypeText(message.type) }}
          </div>
        </div>
        <div class="message-content">{{ message.content }}</div>
        <div class="message-indicator" :class="message.type"></div>
        <div class="message-glow"></div>
      </div>
    </div>
    <div class="message-footer">
      <div class="message-stats">
        <span class="stat-item">
          <i class="stat-icon">💬</i>
          今日消息: {{ todayMessageCount }}
        </span>
        <span class="stat-item">
          <i class="stat-icon">⚠️</i>
          警告: {{ warningCount }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, watch } from 'vue'
import type { MessageItem } from '../types'

interface Props {
  messages: MessageItem[]
}

interface Emits {
  (e: 'messageClick', message: MessageItem): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const messageListRef = ref<HTMLElement>()
const newMessageIds = ref<Set<string>>(new Set())

/**
 * 处理消息点击事件
 */
const handleMessageClick = (message: MessageItem) => {
  emit('messageClick', message)
}

/**
 * 获取消息类型文本
 */
const getTypeText = (type: MessageItem['type']) => {
  const typeMap = {
    'info': '信息',
    'warning': '警告',
    'success': '成功',
    'error': '错误'
  }
  return typeMap[type] || '未知'
}

/**
 * 检查是否为新消息
 */
const isNewMessage = (message: MessageItem) => {
  return newMessageIds.value.has(message.id)
}

/**
 * 今日消息数量
 */
const todayMessageCount = computed(() => {
  return props.messages.length
})

/**
 * 警告消息数量
 */
const warningCount = computed(() => {
  return props.messages.filter(msg => msg.type === 'warning' || msg.type === 'error').length
})

/**
 * 监听消息变化，检测实时消息更新
 */
watch(() => props.messages, async (newMessages, oldMessages) => {
  console.log('🔄 MessagePanel: 消息更新检测', {
    新消息数量: newMessages?.length || 0,
    旧消息数量: oldMessages?.length || 0,
    新消息列表: newMessages?.map(m => ({ id: m.id, content: m.content, type: m.type })) || []
  });

  // 检测是否有新消息（通过ID变化判断）
  const previousMessageIds = new Set((oldMessages || []).map(m => m.id));
  
  const hasNewMessages = newMessages && newMessages.some(msg => !previousMessageIds.has(msg.id));
  
  if (hasNewMessages) {
    console.log('🆕 MessagePanel: 检测到新消息');
    
    // 标记所有新消息
    newMessages.forEach(msg => {
      if (!previousMessageIds.has(msg.id)) {
        newMessageIds.value.add(msg.id);
        console.log(`✨ 标记新消息: ${msg.content}`);
        
        // 3秒后移除新消息标记
        setTimeout(() => {
          newMessageIds.value.delete(msg.id);
          console.log(`🔄 移除新消息标记: ${msg.id}`);
        }, 3000);
      }
    });
    
    // 滚动到顶部显示最新消息
    await nextTick();
    if (messageListRef.value) {
      messageListRef.value.scrollTop = 0;
    }
  } else if (newMessages && oldMessages && newMessages.length !== oldMessages.length) {
    console.log('🔄 MessagePanel: 消息数量变化但无新ID，可能是更新');
  }
}, { deep: true, immediate: true })
</script>

<style scoped>
.message-panel {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.panel-title {
  color: #ffd93d;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  position: relative;
}

.title-icon {
  font-size: 18px;
}

.title-decoration {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, #ffd93d, transparent);
}

.message-list {
  flex: 1;
  overflow: hidden; /* 改为隐藏溢出，不显示滚动条 */
  overflow-x: hidden;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 150px; /* 限制高度，刚好显示两条消息 */
}

.message-list::-webkit-scrollbar {
  width: 4px;
}

.message-list::-webkit-scrollbar-track {
  background: rgba(255, 217, 61, 0.1);
  border-radius: 2px;
}

.message-list::-webkit-scrollbar-thumb {
  background: rgba(255, 217, 61, 0.5);
  border-radius: 2px;
}

.message-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 217, 61, 0.7);
}

.message-item {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  animation: slideIn 0.3s ease-out;
  flex-shrink: 0;
}

.message-item.message-new {
  animation: messageNew 0.5s ease-out, glow 2s ease-in-out infinite alternate;
  border-color: rgba(255, 217, 61, 0.6);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes messageNew {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px rgba(255, 217, 61, 0.3);
  }
  to {
    box-shadow: 0 0 15px rgba(255, 217, 61, 0.6);
  }
}

.message-item:hover {
  background: rgba(0, 212, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-time {
  color: #00d4ff;
  font-size: 12px;
}

.message-type-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
}

.message-type-badge.info {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.message-type-badge.success {
  background: rgba(103, 224, 227, 0.2);
  color: #67e0e3;
}

.message-type-badge.warning {
  background: rgba(255, 217, 61, 0.2);
  color: #ffd93d;
}

.message-type-badge.error {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.message-content {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.message-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
}

.message-indicator.info {
  background: #00d4ff;
}

.message-indicator.success {
  background: #67e0e3;
}

.message-indicator.warning {
  background: #ffd93d;
}

.message-indicator.error {
  background: #ff6b6b;
}

.message-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.message-item:hover .message-glow {
  opacity: 1;
  background: radial-gradient(circle at center, rgba(0, 212, 255, 0.1), transparent 70%);
}

.message-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 217, 61, 0.2);
}

.message-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 217, 61, 0.8);
  font-size: 12px;
}

.stat-icon {
  font-size: 14px;
}
</style>
